<template>
	<view class="">
		<view class="bg-white">
			<u-tabs 
				:current="current" 
				:list="tabs" 
				lineWidth="60"
				@click="onTabs"
			>
			</u-tabs>
		</view>
		<basic-info v-if="current===0" @update:basicinfo.sync="updateFormData"></basic-info>
		<atlas-video v-else-if="current===1" @update:file.sync="updateFile"></atlas-video>
		<product-settings v-else-if="current===2" @update:product.sync="updateProduct"></product-settings>
		<discount v-else-if="current===3" @update:gradePrice.sync="updateGradePrice"></discount>
		<multiplet-text v-else-if="current===4" @update:richtext.sync="updateRichText"></multiplet-text>
		<u-gap height="120" bgColor="#fff"></u-gap>
		<view class="bottom-button pt-10">
			<u-button color="#e54d42" text="确认添加" size="large"></u-button>
		</view>
	</view>
</template>

<script>
	import BasicInfo from './components/basic-info.vue'
	import AtlasVideo from './components/atlas-video.vue'
	import ProductSettings from './components/product-settings.vue'
	import Discount from './components/discount.vue'
	import MultipletText from './components/multiple-text.vue'
	export default {
		components: {
			BasicInfo,
			AtlasVideo,
			ProductSettings,
			Discount,
			MultipletText
		},
		data(){
			return {
				current: 0,
				tabs: [
					{name:'基础信息'},
					{name:'图集/视频'},
					{name:'货品设置'},
					{name:'会员折扣'},
					{name:'商品详情'}
				]
			}
		},
		methods: {
			updateFormData(newFormData){
				console.log('newFormData', newFormData)
			},
			updateFile(newFile){
				console.log('newFile', newFile)
			},
			updateGradePrice(newData){
				console.log('newData', newData)
			},
			updateProduct(newData){
				console.log('updateProduct', newData)
			},
			updateRichText(newData){
				console.log('updateRichText', newData)
			},
			onTabs(e){
				if(this.current !== e.index){
					this.current = e.index
				}
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
</style>